<template>
    <el-dialog :close-on-click-modal="false"  ref="dialogform" :title="title" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="物料" prop="materialNo">
                <el-select v-model="ruleForm.materialNo" class="w100p" clearable filterable placeholder="请选择物料"
                    @change="queryOnHandQuantity">
                    <el-option v-for="item, index in materialList" :key="index" :label="item.materialName"
                        :value="item.materialNo"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择行号" prop="onHandQuantityId">
                <el-select v-model="ruleForm.onHandQuantityId" class="w100p" clearable filterable placeholder="请选择仓库管员"
                    @change="chooseOption">
                    <el-option v-for="item, index in handQuantity" :key="index"
                        :label="`行号:${item.batchNo}_生产日期:${item.batchFile.produceDate}_失效日期:${item.batchFile.expirationDate}`"
                        :value="item.onHandQuantityId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="数量">
                <el-input disabled type="number" v-model="ruleForm.num" placeholder="数量">
                    <template slot="append">{{ castUnitName || '' }}</template>
                </el-input>
            </el-form-item>
            <el-form-item label="账面数量">
                <el-input disabled type="number" v-model="ruleForm.nonhandastNum" placeholder="账面数量">
                    <template slot="append">{{ cUnitName || '' }}</template>
                </el-input>
            </el-form-item>
            <el-form-item label="换算率">
                <el-input disabled type="number" v-model="ruleForm.changerate" placeholder="换算率">
                </el-input>
            </el-form-item>
            <el-form-item label="盘点数量" prop="ncountastNum">
                <el-input type="number" v-model="ruleForm.ncountastNum" placeholder="盘点数量">
                    <template slot="append">{{ castUnitName || '' }}</template>
                </el-input>
            </el-form-item>
            <el-form-item label="差异数量">
                <el-input disabled type="number" v-model="ruleForm.ndiffastNum" placeholder="差异数量">
                </el-input>
            </el-form-item>
            <el-form-item label="原因">
                <el-input type="text" v-model="ruleForm.reason" placeholder="请输入原因">
                </el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import warehouseManage from '@/api/digtalOperation/warehouseManage';
export default {
    components: {},
    props: {
        data: {
            type: Object,
            default: () => {
                return {}
            }
        },
        title: {
            type: String,
            default: () => {
                return '操作表单'
            }
        },
        dialogVisible: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        materialList: {
            type: Array,
            default: () => {
                return []
            }
        },
    },
    data() {
        return {
            addEditApi: warehouseManage.addInfo,
            cUnitName: '',
            materialNo: '',
            castUnitName: '',
            ruleForm: {},
            handQuantity: [],
            rules: {
                materialNo: [
                    { required: true, message: '请选择物料', trigger: 'change' }
                ],
                onHandQuantityId: [
                    { required: true, message: '请选择行号', trigger: 'change' }
                ],
                ncountastNum: [
                    { required: true, message: '请输入盘点数量', trigger: 'change' }
                ]
            }
        }
    },
    computed: {
        person() {
            return this.$store.state.initData.person || [];
        },
        stordoc() {
            return this.$store.state.initData.stordoc || [];
        },
    },
    watch: {
        dialogVisible(v) {
            v && this.initData()
        },
        'ruleForm.ncountastNum'(v) {
            let num = v || 0;
            if (this.ruleForm.onHandQuantityId && this.ruleForm.materialNo) {
                this.$set(this.ruleForm, 'ndiffastNum', Number(num) - Number(this.ruleForm.num))
            } else {
                // this.$message.warning('请先选择物料行号')
            }
        }
    },
    mounted() {
    },
    methods: {
        initData() {
            this.resetForm();
        },
        chooseOption(v) {
            if (v) {
                const selectedOption = this.handQuantity.find(option => option.onHandQuantityId === v);
                this.castUnitName = selectedOption.castUnit?.symbol;
                this.cUnitName = selectedOption.cUnit?.symbol
                this.ruleForm.nonhandastNum = selectedOption.onHandQuantity;
                this.ruleForm.changerate = selectedOption.changerate;
                this.ruleForm.num = selectedOption.num;
                this.ruleForm.batchNo = selectedOption.batchNo;
                this.ruleForm.castUnitNo = selectedOption.castUnitNo;
                this.ruleForm.invcountNo = this.data.invcountNo;
                this.ruleForm.stordocNo = this.data.stordocNo;
                this.$set(this.ruleForm, 'ncountastNum', '');
                console.log(selectedOption)
            } else {
                this.ruleForm = {};
                this.resetForm();
            }
        },
        queryOnHandQuantity() {
            this.materialNo = this.ruleForm.materialNo
            if (this.ruleForm.materialNo) {
                let params = {
                    invcountNo: this.data.invcountNo,
                    stordocNo: this.data.stordocNo,
                    materialNo: this.ruleForm.materialNo,
                    systemNo: sessionStorage.systemNo
                }
                warehouseManage.queryOnHandQuantity(params).then(res => {
                    if (res.code == 1 && res.data.length > 0) {
                        this.handQuantity = res.data;
                        this.ruleForm.onHandQuantityId = res.data[0].onHandQuantityId;
                        this.chooseOption(res.data[0].onHandQuantityId)
                    } else {
                        this.handQuantity = []
                    }
                }).catch(err => {
                    console.log(err)
                })
            } 
        },
        //提交表单
        submitForm() {
            console.log(this.ruleForm)
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.addEditApi({ ...this.ruleForm }).then(res => {
                        if (res.code == 1) {
                            this.$message.success('操作成功')
                        } else {
                            this.$message.warning('操作失败')
                        }
                        this.cancel()
                    }).catch(err => {
                        this.$message.warning('操作失败')
                    })
                } else {
                    return false;
                }
            })
        },
        //重置
        resetForm() {
            this.castUnitName = '';
            this.cUnitName = '';
            this.ruleForm = {};
            this.$refs.ruleForm && this.$refs.ruleForm.resetFields()
        },
        //取消关闭
        cancel() {
            this.resetForm()
            this.$emit("closeDialog")
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => { this.resetForm(); this.cancel() })
                .catch(_ => { });
        }
    }
};
</script>
<style lang="scss" scoped>
.tag {
    margin: 5px 0;
    margin-right: 5px;
    cursor: pointer;
}
</style>